import { ref, watch, reactive } from 'vue'
import { useMouseInElement } from '@vueuse/core'

export function useMove (target) {
  const left = ref(0)
  const top = ref(0)
  // 背景图
  const bg = reactive({ x: 0, y: 0 })
  const { elementX, elementY, isOutside } = useMouseInElement(target)
  watch([elementX, elementY, isOutside], () => {
    /**
    * 1.控制可移动的范围 =>根据elementX, elementY 值计算得到蒙层的位置=>给left/top赋值
    *
    * 2.动态绑定left/top值
    *
    */
    //  处理x轴
    if (elementX.value < 100) {
      left.value = 0
    } else if (elementX.value > 300) {
      left.value = 200
    } else {
      left.value = elementX.value - 100
    }
    // 处理Y轴
    if (elementY.value < 100) {
      top.value = 0
    } else if (elementY.value > 300) {
      top.value = 200
    } else {
      top.value = elementY.value - 100
    }
    // 放大图片=>2:1
    bg.x = -left.value * 2
    bg.y = -top.value * 2
  })

  return { left, top, bg, isOutside }
}
